<template>
  <div class="api-container">
    <div class="api-main-container">
      <el-form
        label-width="80px"
        label-position="left"
        size="mini"
        @submit.native.prevent
      >
        <el-form-item label="API">
          <el-autocomplete
            v-model="apiUrl"
            style="width: 300px"
            class="line-input"
            :fetch-suggestions="querySearch"
            @keyup.enter.native="handleChangeApi"
            @select="handleSelect"
          />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="primary" size="mini" @click="handleChangeApi">Submit</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Api',
  data() {
    return {
      apiList: [],
      apiUrl: this.$store.getters.api
    }
  },
  methods: {
    handleChangeApi() {
      this.$store.dispatch('app/setApi', this.apiUrl).then(() => {
        location.href = '/'
      })
    },
    querySearch(queryString, cb) {
      const apiList = this.apiList
      var results = queryString ? apiList.filter(this.createFilter(queryString)) : apiList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (apiList) => {
        return (apiList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(item) {
    }
  }
}
</script>

<style lang="scss" scoped>
.api-container {
  padding: 10px;
  height: 100%;

  .api-main-container {
    background-color: #ffffff;
    height: 100%;
  }

  .footer {
    padding-top: 15px;
  }
}
</style>
